<template>
    <a-layout class="main">
        <div class="form">
            <a-button class="formButton" type="primary" @click="getProcessList">查询</a-button>
            <a-button class="formButton" type="primary" style="margin-left: 10px;"
                @click="$router.push('/kFormDesign')">新增</a-button>
        </div>
        <a-table :loading="loading" rowKey="formId" :columns="columns" :dataSource="dataSource">
            <span slot="operate" class="go" slot-scope="text,scope" @click="goPath(scope)">
                修改
            </span>
        </a-table>
    </a-layout>
</template>

<script>
import { listForm } from "../../components/process/api/form"
export default {
    data() {
        return {
            dataSource: [],
            columns: [
                {
                    title: "表单编号",
                    dataIndex: "formId",
                    key: "formId"
                }, {
                    title: "表单名称",
                    dataIndex: "formName",
                    key: "formName"
                }, {
                    title: "备注",
                    dataIndex: "remark",
                    key: "remark"
                }, {
                    title: "操作",
                    key: "operate",
                    scopedSlots: { customRender: 'operate' },
                }
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                formName: null,
                formContent: null,
            },
            loading: false
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getProcessList() {
            this.getList()
        },
        getList() {
            this.loading = true;
            listForm(this.queryParams).then(res => {
                this.dataSource = res.rows;
            }).finally(() => {
                this.loading = false
            })
        },
        goPath(record) {
            this.$router.push({
                path: "/kFormDesign", query: {
                    formId: record.formId
                }
            })
        }
    }
}
</script>


<style scoped lang="less">
.main {
    width: 1200px;
    margin: auto;
    margin-top: 20px;
    background-color: white;

    .form {
        display: flex;
        justify-content: center;

        .formButton {
            margin: 20px 0;
        }
    }

    .go {
        cursor: pointer;

        &:hover {
            color: #40a9ff;
        }
    }

}
</style>